<template>
  <div style="position: fixed;z-index:100">
    <TitleLenged
              :isShow="isShowTitle"
              :titleText="titleText"
            ></TitleLenged>
             <MapLenged  :isShow="isShowLenged"
      :lengedData="lengedData"></MapLenged>
     <CostomProgress
        :title="c_title"
        :modal2Visible="c_visable"
        :percent="c_percent"
      ></CostomProgress>
    <div style="width:320px;position: fixed;bottom:20px;left: 10px;">

      <div class="panel b-primary">
        <div class="panel-heading b-b b-light">
          数据列表
        </div>
        <div
          class="panel-body"
          :style="{height: (contentHeight*0.6)+'px' }"
          style="overflow-y: scroll"
        >
          <a-skeleton
            active
            :loading="loading"
          >
            <a-tree
    checkable
    :treeData="treeData"
   
    @select="this.onSelect"
    @check="this.onCheck"
  >
  </a-tree>
          </a-skeleton>

        </div>
        <div class="panel-footer">
          <div style="
    text-align: center;
"><button class="btn btn-rounded btn-stroke btn-success" @click="calbtn">网格分析</button></div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import CostomProgress from '../progress/index.vue';
import { mapGetters, mapActions } from 'vuex';
import TitleLenged from '../mainContent/TitleLenged.vue';
import MapLenged from '../mainContent/MapLenged.vue';
import * as mapOper from '../../scripts/mapOper.js';
let config = require('../../config/config');
let lenged_config = require('../../config/lengedConfig');
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');
export default {
  name: 'R10303',
  data() {
    return {
      loading: true,
      //自定义进度条数据
      c_title: '',
      c_percent: 0,
      c_visable: false,
      // 是否显示标题
      isShowTitle: false,
      // 标题内容
      titleText: '',
      //是否显示图例
      isShowLenged:false,
      //图例内容
      lengedData:[],
      selectedKey:[],
      mineLocalData:[],
      treeData:[
        {
          title: '地热模型',
          key: '0-0',
        },{
          title: '矿区数据',
          key: '0-2',
        }
      ],
    };
  },
  components: {
    CostomProgress,
    TitleLenged,
    MapLenged
  },
  computed: { ...mapGetters(['map', 'contentHeight']) },
  mounted() {
    /**
     * 清除地图
     */
    if (this.map) {
      let map = mapOper.removeAllLayers(this.map);
      this.changeMap({ map: map });

      let imap = mapOper.removeInteractions(this.map);
      this.changeMap({ map: imap });
      let omap = mapOper.removeAllOverlay(this.map);
      this.changeMap({ map: omap });
    }
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  },
  methods: {
    ...mapActions(['changeMap', 'changeLengedTitle']),
    onSelect (selectedKeys, info) {
      console.log('selected', selectedKeys, info);
    },
    onCheck (checkedKeys) {
      this.selectedKey=checkedKeys;
    },
    calbtn(){
      if(this.selectedKey.length==0){
        return;
      }
      this.c_title = '加载中';
      this.c_visable = true;
      //加载网格图层
      let params = {
        this: this,
        url:
          config.baseMapUrl +
          'wuhai-wfsmap?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&TYPENAME=meannetfish&OUTPUTFORMAT=json',
        successFunc: response => {
          let that = this;
          that.c_title = '加载中';
          that.c_visable = false;
          that.isShowTitle = true;
         
          that.titleText =
        '乌海周边火点等级3公里网格分析结果';
          that.isShowLenged=true;
          that.lengedData=lenged_config.LSTNetLenged;
          that.mineLocalData = response.data;

          let all_features = _.forEach(response.data.features, function(item) {
            let countlv=0;
            let lv2011=Number(item.properties.mean2011);
            let lv2012=Number(item.properties.mean2012);
            let lv2013=Number(item.properties.mean2013);
            let lv2014=Number(item.properties.mean2014);
            let lv2015=Number(item.properties.mean2015);
            let lv2016=Number(item.properties.mean2016);
            let lv2017=Number(item.properties.mean2017);
            let lv2018=Number(item.properties.mean2018);
            if(lv2011<lv2012){
              countlv+=1;
            }
            if(lv2011<lv2012){
              countlv+=1;
            }
            if(lv2012<lv2013){
              countlv+=1;
            }
            if(lv2013<lv2014){
              countlv+=1;
            }
            if(lv2014<lv2015){
              countlv+=1;
            }
            if(lv2015<lv2016){
              countlv+=1;
            }
            if(lv2016<lv2017){
              countlv+=1;
            }
            if(lv2017<lv2018){
              countlv+=1;
            }
            item.properties.level = 'lv'+countlv;
          });
     
          let customData={
            type: 'FeatureCollection',
            name: 'meannetfish',
            features: all_features
          };
          console.log(customData);
          let style = mapOper.getGeoJsonStyle('lstnetfish');
          let wfsParams = {
            map: that.map,
            jsonData: customData,
            style: style,
            styleFunc: function(feature) {
              var clsval = feature.get('level');
              return style[clsval];
            },
            selectFunc: function(e) {
              if (e.target.getFeatures().getLength() == 1) {
                let feature = e.target.getFeatures().item(0);
                //console.log(feature + '--' + feature.get('applicant'));

                let extents = feature.getGeometry().getExtent();
                let popset = {
                  map: that.map,
                  coordinate: [
                    (extents[2] + extents[0]) / 2,
                    (extents[3] + extents[1]) / 2
                  ]
                };

                that.popupData = {
                  display: 'block',
                  contentType: 'landuse',
                  Title: feature.get('DLMC'),
                  DLMC: feature.get('DLMC'),
                  QSXZ: feature.get('QSXZ'),
                  QSDWMC: feature.get('QSDWMC'),
                  TBMJ: Number(feature.get('TBMJ')),
                  GDLX: feature.get('GDLX'),
                  SJNF: feature.get('SJNF')
                };
                mapOper.showPopUp(popset);

                let zoomparams = {
                  map: that.map,
                  center: popset.coordinate,
                  zoom: 8
                };
                mapOper.ZoomAndCenter(zoomparams);
              } else {
                that.popupData = { display: 'none' };
              }
            }
          };
          let wfsmap = mapOper.loadWFSLayer(wfsParams);
          this.changeMap({ map: wfsmap });
         
        }
      };
      commonOper.HttpGet(params);
        
    }
  }
};
</script>

